<template>
	<div>
		<Layout>
			<header class="masthead" :style="'background-image: url(http://127.0.0.1:1337'+ this.$page.posts.cover.url + ');'">
			    <div class="container position-relative px-4 px-lg-5">
			        <div class="row gx-4 gx-lg-5 justify-content-center">
			            <div class="col-md-10 col-lg-8 col-xl-7">
			                <div class="post-heading">
			                    <h1>{{$page.posts.title}}</h1>
			                    <!-- <h2 class="subheading">Problems look mighty small from 150 miles up</h2> -->
			                    <span class="meta">
			                        <!-- Posted by
			                        <a href="#!">123</a>
			                        on August 24, 2021 -->
			                    </span>
			                </div>
			            </div>
			        </div>
			    </div>
			</header>
			<article class="mb-4">
			    <div class="container px-4 px-lg-5">
			        <div class="row gx-4 gx-lg-5 justify-content-center">
			            <div class="col-md-10 col-lg-8 col-xl-7" v-html="mdToHtml($page.posts.content)">
			            </div>
			        </div>
			    </div>
			</article>
		</Layout>
	</div>
</template>

<page-query>
	query ($id:ID!){
	  posts:strapiPosts(id:$id) {
	    id
	    title
	    content
	    cover{
	      url
	    }
	    tags{
	      id
	      title
	    }
	  }
	}
</page-query>

<script>
	import MarkdownIt from 'markdown-it'
	const md = new MarkdownIt;
	export default {
		data() {
			return {
				user: null
			}
		},
		mounted() {
			console.log(md.render('# hell'))
			console.log("background-image: url('http://127.0.0.1:1337" + this.$page.posts.cover.url + "')")
		},
		methods:{
			mdToHtml(markdown){
				return md.render(markdown)
			}
		}
	}
</script>

<style>
</style>
